<template>
  {{ name }},{{ age }}
  <button @click="changeName">改变姓名</button>
  <button @click="sayChangeName">显示姓名</button>

  <button @click="changeInfo">改变工作信息</button>
  <button @click="sayChangeInfo">显示工作信息</button>
  <button @click="allRef">整体赋值</button>
  <button @click="allReactive">整体赋值,拷贝</button>
</template>
<script setup>
  import { useHead } from '@vueuse/head';
  useHead({
    title: 'ref, reactive',
    meta: [
      { name: 'description', content: 'ref, reactive' }
    ]
  });

  import { ref, reactive } from 'vue'
  import { ElMessage} from 'element-plus'


  // let name = '张三'
  // let age = 18
  // 响应式数据
  let name = ref('zs')
  let age = ref(18)

   let job = reactive({
      type:'前端工程师',
      salary:'30k'
    })
 
  const changeInfo = ()=>{
    job.type='UI设计师'
    job.salary='60k'
  }
  const sayChangeInfo = ()=>{
    ElMessage.success(`${job.type}，薪资${job.salary}`)
  }
  const sayChangeName = ()=>{
    ElMessage.success(`你好，${name.value}，你今年${age.value}岁`)
  }
  const changeName = ()=>{
    name.value = 'ls'
    console.log(name.value);
  }
  // 整体赋值
  let person = ref({name:"wz",age:18})
  const allRef = ()=>{
      person.value = {name:"ls",age:19}// 直接赋值
      console.log(person.value);
  }
  let dog = reactive({name:"小白",age:1})
  const allReactive = ()=>{
    Object.assign(dog,{name:"小黑",age:2});// 整体赋值,拷贝
    console.log(dog);
  }
  
</script>



<style scoped>
  button{
    margin: 10px;
  }
</style>